<template>
  <el-dialog :title="isEdit?'编辑账户组':'新增账户组'"
             :visible.sync="dialogForm"
             width="720px">
    <el-form :inline="true"
             ref="form"
             :model="condition"
             class="search-form"
             label-width="100px">
      <el-row>
        <el-form-item label="账户组名称"
                      prop="name">
          <el-input v-model="form.name"
                    placeholder=""></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="border-line"></div>
    <el-row class="selectAccount"> 
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="handleSelectAccountForm">选择账户</el-button>
      <el-button plain
                 type="info"
                 icon="el-icon-delete"
                 @click="handleMove">删除</el-button>
    </el-row>
    <el-table :data="form.cargoOwnerAccounts"
              border
              stripe
              max-height="500"
              @current-change="handleCurrentChange">
      <el-table-column label="序号"
                       type="index"
                       width="50"></el-table-column>
      <el-table-column prop="mnemonicCode"
                       label="助记码"
                       min-width="80"></el-table-column>
      <el-table-column prop="name"
                       label="账户名称"
                       min-width="120"></el-table-column>
      <el-table-column prop="orgName"
                       label="客户名称"
                       min-width="200"></el-table-column>
    </el-table>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="primary"
                 @click="handleSubmit">保存</el-button>
      <el-button plain
                 type="info"
                 @click="dialogForm = false">返回</el-button>
    </div>
    <select-account-form ref="selectAccountForm"
                         @load="loadData"></select-account-form>
  </el-dialog>
</template>

<script>
import {
  addAccountGroup,
  updateAccountGroup
} from '@/api/commerce/accountGroup'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchResource from '@/components/autocomplete/autoSearchResource'
import selectAccountForm from './selectAccountForm'
import { sortLength } from '@/utils/rules'
import { PUBLIC_LIMIT } from '@/utils/Reg'

export default {
  name: 'addAccountForm',
  components: {
    selectAccountForm,
    autoSearchOrg,
    autoSearchResource
  },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        name: [
          { required: true, validator: PUBLIC_LIMIT, trigger: 'blur' },
          sortLength
        ]
      },
      condition: {}, // 查询条件
      // accountGroupData: [], // table数组
      pageSearch: null, // 分页查询api接口
      id: '',
      currentRow: '',
      dialogForm: false,
      isEdit: false
    }
  },
  methods: {
    loadData(row) {
      this.form.cargoOwnerAccounts.push(...row)
    },
    clearForm() {
      return {
        name: '',
        ramrk: null,
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        cargoOwnerAccounts: []
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    handleMove() {
      this.form.cargoOwnerAccounts.splice(this.currentRow, 1)
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addAccountGroup(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 编辑
    handleToEdit() {
      updateAccountGroup(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    handleCllx(v) {
      if (v === 'JOB_CLLX_HC') {
        this.form.teu = 0
      }
      this.form.typeCode = v
    },
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteaddAccountGroup(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            //this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleSelectAccountForm() {
      // this.$refs.selectAccountForm.loadData()
      this.$refs.selectAccountForm.dialogForm = true
    }
  }
}
</script>

<style scoped>
.border-line {
  margin-top: 8px;
  border-bottom: 1px dashed #ddd;
}
.selectAccount {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
